<template>
  <div class="settingConfig" :style="`--text-color:${isDark ? '#fff' : '#000'};`">
    <el-form label-width="100px" label-position="left">
      <el-form-item v-for="item in props.struct" :label="item.name">
        <div style="width: 100%;" v-if="item.childs.length == 0">
          <SettingConfigInput v-model:modelValues="changeValues[item.field]" :placeholder="'请设置' + item.name"
            :mode="item.mode" :type="item.type" :options="item.options" :desc="item.desc"></SettingConfigInput>
        </div>
        <div style="width: 100%;" v-if="item.childs.length > 0 && item.mode != 'list'">
          <SettingConfig v-model:datas="changeValues[item.field]" :struct="item.childs"></SettingConfig>
        </div>
        <div style="width: 100%;" v-if="item.childs.length > 0 && item.mode == 'list'">
          <SettingConfigTable v-model:tableData="changeValues[item.field]" :columnChilds="item.childs"
            :desc="item.desc">
          </SettingConfigTable>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts' setup>
import { useDark } from '@pureadmin/utils';
import SettingConfigInput from './SettingConfigInput.vue';
import SettingConfigTable from './SettingConfigTable.vue';
const { isDark } = useDark();
const props = defineProps({
  datas: {},
  struct: {}
})
const emits = defineEmits(['update:datas'])
const changeValues = ref()
watch(() => props.datas, () => {
  changeValues.value = props.datas
}, {
  immediate: true
})
watch(() => changeValues.value, () => {
  emits('update:datas', changeValues.value)
}, {
  immediate: true
})
</script>

<style lang='scss' scoped>
.settingConfig {
  :deep(.el-form-item) {
    margin-bottom: 24px !important;

    td {
      vertical-align: top;
    }

    .el-form-item__label {
      height: auto;
      line-height: 1.3;
      word-break: break-all;
      color: var(--text-color)!important;
    }

    .el-form-item__content {
      align-items: flex-start;

      .el-form-item__label {
        color: #999999 !important;
      }
    }
  }
}
</style>